Obsługa języka stylów liczników CSS: Formatowanie internacjonalizacji dla odbiorców globalnych

We współczesnym, globalnie połączonym świecie, programiści stron internetowych muszą tworzyć witryny i aplikacje, które zaspokajają potrzeby zróżnicowanej publiczności. Oznacza to uwzględnienie nie tylko języka, ale także konwencji kulturowych i systemów numeracji używanych w różnych regionach. Style liczników CSS stanowią potężny mechanizm formatowania list i innych numerowanych treści w sposób, który szanuje te niuanse kulturowe. Ten kompleksowy przewodnik zbada możliwości stylów liczników CSS dla internacjonalizacji (i18n) i zademonstruje, jak skutecznie z nich korzystać.

Zrozumienie stylów liczników CSS

Liczniki CSS to zmienne utrzymywane przez reguły CSS w celu śledzenia, ile razy są używane. Służą głównie do numerowania list, nagłówków i innych elementów. Style liczników CSS rozszerzają tę funkcjonalność, umożliwiając definiowanie niestandardowych systemów numeracji wykraczających poza standardowe cyfry arabskie i rzymskie. Jest to kluczowe dla obsługi różnych języków i preferencji kulturowych.

Podstawowe właściwości CSS związane z używaniem stylów liczników to:

• counter-reset: Inicjalizuje lub resetuje licznik do określonej wartości.
• counter-increment: Zwiększa wartość licznika.
• content: Używane z pseudo-elementami ::before lub ::after do wyświetlania wartości licznika.
• counter() lub counters(): Funkcje używane we właściwości content do formatowania wartości licznika.
• @counter-style: Definiuje niestandardowy styl licznika z różnymi właściwościami do kontrolowania formatowania.

Moc @counter-style

Reguła @counter-style jest sercem internacjonalizacji stylu licznika CSS. Pozwala zdefiniować niestandardowy system numeracji z różnymi właściwościami, które kontrolują sposób renderowania wartości licznika. Przyjrzyjmy się kluczowym właściwościom w ramach reguły @counter-style:

• system: Określa algorytm używany do generowania reprezentacji licznika. Typowe wartości to cyclic, numeric, alphabetic, symbolic, fixed i additive.
• symbols: Definiuje symbole używane przez styl licznika, takie jak liczby, litery lub znaki niestandardowe.
• additive-symbols: Używane z systemem additive do definiowania symboli i odpowiadających im wartości liczbowych.
• suffix: Określa tekst dołączany po każdej reprezentacji licznika (np. kropka lub nawias zamykający).
• prefix: Określa tekst poprzedzający każdą reprezentację licznika.
• range: Ogranicza zakres wartości, dla których obowiązuje styl licznika.
• pad: Określa minimalną liczbę cyfr do użycia, uzupełniając je zerami wiodącymi, jeśli to konieczne.
• speak-as: Kontroluje, w jaki sposób wartość licznika jest ogłaszana przez czytniki ekranu w celu ułatwienia dostępu.
• fallback: Określa zapasowy styl licznika do użycia, jeśli bieżący styl nie jest obsługiwany przez przeglądarkę.

Przykłady internacjonalizacji z @counter-style

Przejdźmy teraz do kilku praktycznych przykładów użycia @counter-style do formatowania liczników dla różnych języków i kontekstów kulturowych.

1. Cyfry arabskie z cyframi arabsko-indyjskimi

Chociaż cyfry arabskie (0-9) są powszechnie używane, wiele regionów arabskojęzycznych woli używać cyfr arabsko-indyjskich (٠‎-٩‎). Możemy stworzyć styl licznika, aby to osiągnąć:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

Ten kod definiuje styl licznika o nazwie arabic-indic, który używa cyfr arabsko-indyjskich jako symboli. Właściwość suffix dodaje kropkę i spację po każdej liczbie. Następnie CSS stosuje ten styl do listy uporządkowanej (<ol>), aby wyświetlić liczby w formacie arabsko-indyjskim.

2. Cyfry rzymskie (wielkie i małe litery)

Cyfry rzymskie są powszechnie używane w różnych kontekstach, a style liczników CSS mogą je łatwo obsługiwać:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

Ten przykład pokazuje, jak utworzyć style liczników zarówno wielkimi (upper-roman), jak i małymi (lower-roman) literami rzymskimi. Następnie możesz zastosować te style do różnych list za pomocą klas CSS (.upper-roman i .lower-roman). Na przykład:

<ol class="upper-roman">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

<ol class="lower-roman">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

3. Cyfry gruzińskie

Cyfry gruzińskie używają unikalnego systemu liter. Możemy zdefiniować styl licznika, aby reprezentować liczby w języku gruzińskim:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

Ten przykład używa systemu fixed, ponieważ gruziński system numeracji ma ograniczony zestaw symboli dla pierwszych 33 liczb. Właściwość range ogranicza styl licznika do wartości między 1 a 33. Dla liczb większych niż 33 trzeba będzie zaimplementować bardziej złożoną logikę lub inny system numeracji.

4. Cyfry ormiańskie

Podobnie jak w przypadku gruzińskiego, cyfry ormiańskie również używają liter do reprezentowania liczb:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

Ten przykład jest podobny do przykładu gruzińskiego, używając systemu fixed i definiując litery ormiańskie jako symbole. Wartość range jest ustawiona na 1-39, obejmując podstawowy zestaw cyfr ormiańskich.

5. Cyfry CJK (chińskie, japońskie, koreańskie)

Cyfry CJK oferują więcej złożoności, z różnymi formami dla kontekstów formalnych i nieformalnych oraz zmiennymi poziomami szczegółowości. Spójrzmy na uproszczony chiński:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

Należy zauważyć, że jest to uproszczona reprezentacja. Pełna obsługa cyfr CJK, szczególnie dla większych liczb, wymagałaby bardziej złożonej implementacji obejmującej system additive i obsługę wartości miejsc (dziesiątki, setki, tysiące itp.). Ten kod demonstruje podstawową reprezentację cyfr.

Zaawansowane techniki i uwagi

1. Łączenie stylów liczników

Możesz łączyć wiele stylów liczników, aby tworzyć bardziej złożone schematy numeracji. Na przykład możesz użyć licznika podstawowego dla rozdziałów i licznika pomocniczego dla sekcji w każdym rozdziale.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. '; 
}

h2::before {
  content: counter(chapter) '.' counter(section) '. '; 
}

Ten kod tworzy hierarchiczny system numeracji, w którym rozdziały są numerowane sekwencyjnie, a sekcje są numerowane w każdym rozdziale (np. 1.1, 1.2, 2.1, 2.2).

2. Uwagi dotyczące dostępności

Upewnij się, że Twoje style liczników są dostępne dla użytkowników z niepełnosprawnościami. Użyj właściwości speak-as, aby kontrolować, w jaki sposób wartość licznika jest ogłaszana przez czytniki ekranu. Na przykład:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

Właściwość speak-as: numbers; mówi czytnikowi ekranu, aby ogłosił wartość licznika jako liczbę. Inne opcje obejmują spell-out (dla literowania liczby) i bullets (dla ogłaszania licznika jako punktory).

Dodatkowo, zapewnij alternatywny tekst lub opisy dla wszelkich niestandardowych symboli używanych w stylach liczników, aby użytkownicy z wadami wzroku mogli zrozumieć znaczenie numerowanej treści.

3. Kompatybilność przeglądarki

Chociaż style liczników CSS są szeroko obsługiwane przez nowoczesne przeglądarki, ważne jest, aby wziąć pod uwagę starsze wersje przeglądarek. Użyj właściwości fallback, aby określić zapasowy styl licznika, który będzie używany, jeśli przeglądarka nie obsługuje stylu podstawowego. Na przykład:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

W tym przykładzie, jeśli przeglądarka nie obsługuje systemu cyclic lub niestandardowych symboli, powróci do stylu listy disc.

4. Wrażliwość kulturowa

Podczas implementacji stylów liczników dla różnych języków i kultur, należy pamiętać o kwestiach wrażliwości kulturowej. Zbadaj odpowiednie konwencje numeracji i symbole używane w każdym regionie. Unikaj używania symboli lub formatów, które mogą być obraźliwe lub nieodpowiednie.

Na przykład, niektóre kultury mogą woleć używać różnych znaków interpunkcyjnych lub separatorów w swoich systemach numeracji. Upewnij się, że Twoje style liczników szanują te preferencje.

Praktyczne zastosowania i przypadki użycia

Style liczników CSS mogą być używane w szerokiej gamie scenariuszy tworzenia stron internetowych, w tym:

• Generowanie spisu treści: Automatyczne numerowanie nagłówków i podtytułów w spisie treści.
• Tworzenie numerowanych list: Formatowanie numerowanych list w różnych językach i stylach.
• Numerowanie kroków w samouczku: Prowadzenie użytkowników przez serię kroków z wyraźnym i atrakcyjnym wizualnie numerowaniem.
• Implementacja niestandardowego stronicowania: Tworzenie niestandardowych kontrolek stronicowania z unikalnymi schematami numeracji.
• Wyświetlanie list rankingowych: Pokazywanie rankingów w atrakcyjny wizualnie sposób za pomocą różnych stylów liczników.
• Generowanie dokumentów prawnych: Formatowanie dokumentów prawnych ze specyficznymi wymaganiami dotyczącymi numeracji.
• Formatowanie artykułów naukowych: Wyświetlanie równań, figur i tabel z odpowiednim numerowaniem.

Najlepsze praktyki dotyczące używania stylów liczników CSS

Aby upewnić się, że Twoje style liczników CSS są skuteczne i łatwe w utrzymaniu, postępuj zgodnie z tymi najlepszymi praktykami:

• Używaj opisowych nazw dla swoich stylów liczników: Wybieraj nazwy, które wyraźnie wskazują cel i formatowanie stylu (np. arabic-indic, upper-roman, georgian).
• Utrzymuj swoje style liczników modułowe: Zdefiniuj oddzielne style liczników dla różnych języków i systemów numeracji.
• Używaj klas CSS do stosowania stylów liczników: Unikaj stosowania stylów liczników bezpośrednio do elementów; zamiast tego używaj klas CSS do kontrolowania formatowania.
• Testuj dokładnie swoje style liczników: Przetestuj swoje style liczników w różnych przeglądarkach i urządzeniach, aby upewnić się, że renderują się poprawnie.
• Dokumentuj swoje style liczników: Zapewnij jasną dokumentację swoich stylów liczników, w tym ich cel, formatowanie i użycie.
• Priorytetowo traktuj dostępność: Zawsze bierz pod uwagę dostępność podczas tworzenia stylów liczników i używaj właściwości speak-as, aby upewnić się, że wartości licznika są poprawnie ogłaszane przez czytniki ekranu.

Wnioski

Style liczników CSS stanowią potężny i elastyczny mechanizm internacjonalizacji formatowania numerowanej zawartości w internecie. Wykorzystując regułę @counter-style i jej różne właściwości, możesz tworzyć niestandardowe systemy numeracji, które szanują konwencje kulturowe i niuanse językowe różnych regionów. Postępując zgodnie z najlepszymi praktykami opisanymi w tym przewodniku, możesz zapewnić, że Twoje style liczników są skuteczne, łatwe w utrzymaniu i dostępne dla odbiorców na całym świecie. W miarę jak tworzenie stron internetowych wciąż ewoluuje, zrozumienie i wykorzystanie stylów liczników CSS do internacjonalizacji stanie się coraz ważniejsze dla tworzenia naprawdę inkluzywnych i przyjaznych dla użytkownika doświadczeń w internecie. Wykorzystaj moc stylów liczników CSS i twórz witryny internetowe, które rezonują z użytkownikami z całego świata.

Dalsza lektura

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles